<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">默认风格</div>
                        <div class="layui-card-body">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">网站设置</li>
                                    <li>用户管理</li>
                                    <li>权限分配</li>
                                    <li>商品管理</li>
                                    <li>订单管理</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        1. 高度默认自适应，也可以随意固宽。
                                        <br>2. Tab进行了响应式处理，所以无需担心数量多少。
                                    </div>
                                    <div class="layui-tab-item">内容2</div>
                                    <div class="layui-tab-item">内容3</div>
                                    <div class="layui-tab-item">内容4</div>
                                    <div class="layui-tab-item">内容5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">动态操作</div>
                        <div class="layui-card-body">
                            <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="11">网站设置</li>
                                    <li lay-id="22">用户管理</li>
                                    <li lay-id="33">权限分配</li>
                                    <li lay-id="44">商品管理</li>
                                    <li lay-id="55">订单管理</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">内容1</div>
                                    <div class="layui-tab-item">内容2</div>
                                    <div class="layui-tab-item">内容3</div>
                                    <div class="layui-tab-item">内容4</div>
                                    <div class="layui-tab-item">内容5</div>
                                </div>
                            </div>
                            <div class="site-demo-button" style="margin-bottom: 0;">
                                <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
                                <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
                                <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">Hash地址定位</div>
                        <div class="layui-card-body">
                            <div class="layui-tab" lay-filter="test">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="11">网站设置</li>
                                    <li lay-id="22">用户管理</li>
                                    <li lay-id="33">权限分配</li>
                                    <li lay-id="44">商品管理</li>
                                    <li lay-id="55">订单管理</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
                                    </div>
                                    <div class="layui-tab-item">内容2</div>
                                    <div class="layui-tab-item">内容3</div>
                                    <div class="layui-tab-item">内容4</div>
                                    <div class="layui-tab-item">内容5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">简洁风格</div>
                        <div class="layui-card-body">
                            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">网站设置</li>
                                    <li>用户管理</li>
                                    <li>权限分配</li>
                                    <li>商品管理</li>
                                    <li>订单管理</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 100px;">
                                    <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
                                    <div class="layui-tab-item">内容2</div>
                                    <div class="layui-tab-item">内容3</div>
                                    <div class="layui-tab-item">内容4</div>
                                    <div class="layui-tab-item">内容5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">卡片风格</div>
                        <div class="layui-card-body">
                            <div class="layui-tab layui-tab-card">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">网站设置</li>
                                    <li>用户管理</li>
                                    <li>权限分配</li>
                                    <li>商品管理</li>
                                    <li>订单管理</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 100px;">
                                    <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
                                    <div class="layui-tab-item">2</div>
                                    <div class="layui-tab-item">3</div>
                                    <div class="layui-tab-item">4</div>
                                    <div class="layui-tab-item">5</div>
                                    <div class="layui-tab-item">6</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">当Tab数超过一定宽度</div>
                        <div class="layui-card-body">
                            <div class="layui-tab layui-tab-card" style="width: 290px;">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">网站设置</li>
                                    <li>用户管理</li>
                                    <li>权限分配</li>
                                    <li>商品管理</li>
                                    <li>订单管理</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 100px;">
                                    <div class="layui-tab-item layui-show">
                                        1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。
                                        <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
                                    </div>
                                    <div class="layui-tab-item">2</div>
                                    <div class="layui-tab-item">3</div>
                                    <div class="layui-tab-item">4</div>
                                    <div class="layui-tab-item">5</div>
                                    <div class="layui-tab-item">6</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">带删除功能的Tab</div>
                        <div class="layui-card-body">
                            <div class="layui-tab layui-tab-card" lay-allowclose="true">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">网站设置</li>
                                    <li>用户基本管理</li>
                                    <li>权限分配</li>
                                    <li>商品管理</li>
                                    <li>订单管理</li>
                                </ul>
                                <div class="layui-tab-content" style="height: 150px;">
                                    <div class="layui-tab-item layui-show">
                                        1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例
                                        2. 删除功能适用于所有风格
                                    </div>
                                    <div class="layui-tab-item">2</div>
                                    <div class="layui-tab-item">3</div>
                                    <div class="layui-tab-item">4</div>
                                    <div class="layui-tab-item">5</div>
                                    <div class="layui-tab-item">6</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('element',function(){
    var $ = layui.jquery
    ,element = layui.element;

    //触发事件
    var active = {
        tabAdd: function(){
            //新增一个Tab项
            element.tabAdd('demo', {
                title: '新选项'+ (Math.random()*1000|0) //用于演示
                ,content: '内容'+ (Math.random()*1000|0)
                ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
            })
        }
        ,tabDelete: function(othis){
            //删除指定Tab项
            element.tabDelete('demo', '44'); //删除：“商品管理”


            othis.addClass('layui-btn-disabled');
        }
        ,tabChange: function(){
            //切换到指定Tab项
            element.tabChange('demo', '22'); //切换到：用户管理
        }
    };

    $('.site-demo-active').on('click', function(){
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
    });

    //Hash地址的定位
    var layid = location.hash.replace(/^#test=/, '');
    element.tabChange('test', layid);

    element.on('tab(test)', function(elem){
        location.hash = 'test='+ $(this).attr('lay-id');
    });
});
</script>
</body>
</html>